<template>
  <div class="center" ref="vantaRef"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as THREE from 'three';
  import DOTS from "vanta/src/vanta.clouds.js"

// 引用 DOM 元素
const vantaRef = ref(null);

// Vanta effect
let vantaEffect = null;

// // 初始化 Vanta 效果
// onMounted(() => {
//   if (vantaRef.value) {
//     vantaEffect = DOTS({
//       el: vantaRef.value,
//       THREE: THREE,
//       mouseControls: true, // 鼠标控制
//       touchControls: true, // 触摸控制
//       gyroControls: false, // 陀螺仪控制
//       minHeight: 200.0, // 最小高度
//       minWidth: 200.0, // 最小宽度
//       highlightColor: 0x008cba, // 突出色调
//       midtoneColor: 0x0094d9, // 中间色调
//       lowlightColor: 0x00b4f4, // 暗色调
//       baseColor: 0xffffff, // 低色调
//       blurFactor: 0.52, // 模糊因素
//       speed: 1.2, // 速度
//       zoom: 0.3, // 变焦
//     });
//   }
// });

// 销毁 Vanta 效果
onBeforeUnmount(() => {
  if (vantaEffect) {
    vantaEffect.destroy();
  }
});
</script>

<style lang="less" scoped>
.center {
  width: 100%;
  height: 100vh;
  position: relative; // 确保 Vanta 效果在其父级容器内正确显示
}
</style>